<template>
  <div>
    <div class="address_box">
      <div class="address_head">
        <span class="iconfont icon-jiantou-left" @click="recurrences"></span>
        <p>我的地址</p>
      </div>
      <div class="address" v-if="addresslists">
        <div class="bg_box" v-for="(item, index) in addresslists" :key="index">
          <div class="box">
            <div class="left">
              <div class="index">{{ index + 1 }}</div>
              <div class="test">
                <div class="top">
                  <p>{{ item.name }}</p>
                  <p>{{ item.pohone }}</p>
                </div>
                <div class="bottom">
                  <span v-show="num == index">默认</span>
                  <p>{{ item.home }}</p>
                </div>
              </div>
            </div>
            <div class="right">
              <span
                class="iconfont icon-gaixie"
                @click="$router.push('/newaddress?index=' + index)"
              ></span>
            </div>
          </div>
          <div class="bootm_box">
            <div class="index">
              <div class="left">
                <div
                  :class="{ div_con: num == index }"
                  @click="defaultcon(index)"
                ></div>
                <p>默认地址</p>
              </div>
              <div class="right">
                <p @click="del(index)">删除</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add_btn">
        <div class="btn" @click="$router.push('/newaddress')">
          <p>添加新地址</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data: function () {
    return {
      addresslists: null, //地址列表
      num: 0,
    };
  },
  created() {
    //获取地址列表
    this.addresslists = JSON.parse(sessionStorage.getItem("address"));
    //获取默认地址
    this.num = sessionStorage.getItem("index");
  },
  methods: {
    //判断是否是选择地址
    recurrences(){
      let time = sessionStorage.getItem("addres");
      if(time){
        this.$router.push('/order');
      }else{
        this.$router.push('/my');
      }
    },
    //修改默认地址
    defaultcon(index) {
      Toast("默认地址修改成功");
      sessionStorage.setItem("index", index);
      this.num = index;
    },
    //删除地址
    del(index) {
      this.addresslists.splice(index, 1);
      sessionStorage.setItem("address", JSON.stringify(this.addresslists));
      let i = sessionStorage.getItem("index");
      if (i == index) {
        sessionStorage.setItem("index", 0);
        this.num = 0;
      }
    },
  },
};
</script>

<style lang="less">
.address_box {
  .address_head {
    padding: 10px 18px;
    background-color: #fff;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    span {
      font-weight: bold;
    }
    p {
      display: inline-block;
      padding-left: 33.6%;
    }
  }
  .address {
    background-color: #fff;
    padding: 10px 20px;
    .bg_box {
      margin-top: 10px;
      .box {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        border-bottom: 2px solid #f4f4f4;
        font-size: 12px;
        padding-bottom: 15px;
        .left {
          display: flex;
          padding-left: 10px;
          .index {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #f5f4f9;
            color: #828189;
            line-height: 35px;
            text-align: center;
          }
          .test {
            padding-left: 20px;
            .top {
              display: flex;
              align-items: center;
              p:nth-child(2) {
                padding-left: 5px;
                color: #8b8993;
              }
            }
            .bottom {
              display: flex;
              align-items: center;
              span {
                display: inline-block;
                transform: scale(0.8);
                margin-right: 5px;
                padding: 0 3px;
                background-color: #f5f4f9;
                color: #9d9ca4;
              }
            }
          }
        }
        .right {
          padding: 0 10px;
          border-left: 2px solid #f4f4f4;
        }
      }
      .bootm_box {
        .index {
          padding-top: 10px;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            display: flex;
            align-items: center;
            div {
              width: 12px;
              height: 12px;
              border-radius: 50%;
              background-color: #9d9ca4;
            }
            .div_con {
              background-color: #00c2c2;
            }
            p {
              display: inline-block;
              transform: scale(0.8);
              color: #9d9ca4;
            }
          }
          .right {
            p {
              display: inline-block;
              color: #9d9ca4;
              transform: scale(0.8);
            }
          }
        }
      }
    }
  }
  .add_btn {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 20px;
    padding: 0 10px;
    .btn {
      text-align: center;
      padding: 10px 0;
      width: 100%;
      font-size: 14px;
      color: #fff;
      background-color: #00c2c2;
    }
  }
}
</style>